<template>
  <div>
    <Header title="能源日报"></Header>
    <div class="page__main target">
      <div class="page__scroller">
        <div class="title-bg">
          {{year}}年能源日报
          <!--<button type="button" class="title-bg__btn"></button>-->
        </div>
        <div class="list">
          <div>
            <router-link
              tag="div"
              class="list__item"
              :class="'list__item-' + item.icon"
              :to="{name: item.name, query:{key:item.key}}"
              v-for="(item, index) in list"
              :key="index"
            >
              <div class="list__main">
                <div class="list__title">{{item.title}}</div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from "@/components/Header";

  export default {
    components: {
      Header
    },
    data() {
      return {
        userInfo: this.$store.state.userInfo,
        loading: false,
        role: sessionStorage.getItem('role'),
        year: "",
        list: [
          // {
          //   title: "能源换电日报", //旧
          //   icon: "sfwjf",
          //   name: "ReportFormDetail"
          // },
          {
            title: "能源换电日报", //新
            icon: "sfwjf",
            name: "ReportFormDetailNew"
          },
          {
            title: "能源充电日报",
            icon: "sfwjf",
            name: "ReportFormCharge"
          }
          // {
          //   title: "能源充电日报-新",
          //   icon: "sfwjf",
          //   name: "ReportFormChargeNew"
          // }
        ],
      };
    },
    methods: {
      getManagerList() {
        let date = new Date()
        this.year = date.getFullYear()
      },
      //记录日志
      recordLogs() {
        let params = {
          userId: this.userInfo.user_id,
          verify_code: this.userInfo.verify_code,
          priv_id: '10100750',
        }

        this.$http.post("api/new/insertLogs", params).then(res => {})
      },
    },
    created() {
      // this.recordLogs()
      this.getManagerList()
    }
  };
</script>

<style lang="scss" scoped>
  .target {
    background: #f9f3eb;

    &__head {
      .title-bg {
        box-sizing: border-box;
        padding-top: 10px;
        line-height: 1.5;
      }
    }

    &__department {
      font-size: 14px;
      display: inline-block;
      background: rgba(108, 64, 54, 0.2);
      color: #fff;
      height: 22px;
      line-height: 22px;
      border-radius: 11px;
      padding: 0 10px;
      margin-bottom: 4px;
    }

    &__title {
      font-size: 26px;
      font-weight: bold;
      color: #fff;
      text-shadow: 0px 5px 5px rgba(215, 14, 24, 0.5);
    }
  }
  .list {
    padding: 16px;

    &__item {
      background: #fff;
      border-radius: 10px;
      padding: 16px 10px 16px 50px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        background-size: 100% 100%;
        left: 10px;
        top: 50%;
        margin-top: -16px;
      }
    }

    &__main {
      flex: 1;
    }

    &__right {
      flex: none;
      text-align: right;
      color: #666;
      padding-left: 6px;
    }

    &__num {
      font-size: 19px;
      color: #d70d17;
    }

    &__title {
      font-size: 16px;
      margin-bottom: 4px;
    }
  }

  @each $icon in sfwjf, sfbfqz, ttjfl, ttgbjsl, ttjsjfl, sfgbjsl, gtgbjsl, dmtxms,
  pjzhs
  {
    .list__item-#{$icon}::before {
      background-image: url(~@/assets/images/target/icon-#{$icon}.png);
    }
  }
</style>
